<template>
  <div class="project-video">
    <div class="project-video-left">
      <div class="project-video-title">
        <i class="icon el-icon-video-camera"></i>
        点位列表
      </div>
      <div class="project-video-main">

        <div class="video-item" v-for="(item, index) in videos" :key="index" :class="{selected: item.id === currKey}" @click="onClick(item)">
          <div class="video-item-title">{{item.name}}</div>
          <div class="video-item-txt">{{item.serial}}</div>

          <div class="video-item-status" :class="{offline: !item.online}">
            {{item.online ? '在线' : '离线'}}
          </div>
        </div>

      </div>
    </div>
    <div class="project-video-right">
      <div class="project-video-title">
        <i class="icon el-icon-video-camera"></i>
        <span v-if="curr && curr.name">{{curr.name}}</span>
      </div>
      <div class="project-video-main" v-if="curr">
        <img v-if="curr.online" class="project-video-img" src="@/assets/screen/camera/video1.png" />
        <div v-else class="project-video-offline">
          <div class="project-video-offline__icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div>设备离线，暂无视频</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'project-video',
  cnName: '项目-视频监控',
  data() {
    return {
      videos: [
        {
          id: '1',
          name: '中新天津生态城85-1地块项目门口',
          serial: '12011601581314002860',
          online: true
        },
        {
          id: '2',
          name: '中新天津态城85-1地块5号塔吊',
          serial: '12011601581314002860',
          online: false
        },
        {
          id: '3',
          name: '中新天津生态城85-1地块1号塔吊',
          serial: '12011601581314002860',
          online: true
        },
        {
          id: '4',
          name: '中新天津生态城85-1地块2号塔吊',
          serial: '12011601581314002860',
          online: true
        }
      ],
      currKey: '',
      curr: null
    }
  },
  methods: {
    onClick(item) {
      this.currKey = item.id
      this.curr = item
    }
  }
}
</script>

<style lang="scss" scoped>
.project-video {
  padding: 10px 20px;
  height: 100%;
  display: flex;

  &-title {
    font-size: 20px;
    color: #21E2FF;
    margin-bottom: 15px;

    .icon {
      margin-right: 10px;
    }
  }

  &-left {
    width: 340px;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
  }

  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &-main {
    flex: 1;
  }

  .video-item {
    border-radius: 4px;
    border: 1px solid #1281a9;
    margin-bottom: 10px;
    padding: 15px 12px;
    position: relative;
    overflow: hidden;

    &:hover, &.selected {
      background-color: #304e88;
      border-color: #3EEEB6;
      outline: 1px solid #3eee86;
    }

    &-title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    &-txt {
      font-size: 14px;
    }
    &-status {
      position: absolute;
      background-color: #029E5C;
      font-size: 12px;
      width: 100px;
      text-align: center;
      transform: rotate(45deg);
      right: -34px;
      top: 12px;

      &.offline {
        background-color: #D6832A;
      }
    }
  }

  &-img {
    max-width: 100%;
  }

  &-offline {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2E2D2D;
    flex-direction: column;
    color: #BFC2CA;

    &__icon {
      font-size: 100px;
    }
  }
}
</style>
